<%@ page language="java" pageEncoding="UTF-8"%>

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html:html lang="true">
  <head>
    <html:base />
    
    <title>main.jsp</title>

	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/css/ext-all.css"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/ext-base.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/ext-all.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/ext-lang-zh_CN.js"></script>
    <style type="text/css">
        html, body {
            font: normal 12px verdana;
            margin: 0;
            padding: 0;
            border: 0 none;
            overflow: hidden;
            height: 100%;
        }
        .empty .x-panel-body {
            padding-top:20px;
            text-align:center;
            font-style:italic;
            color: gray;
            font-size:11px;
        }
        .settings {
        background-image:url(${pageContext.request.contextPath}/resources/shared/icons/fam/feed_add.png);
    	}
    </style>
    <script type="text/javascript">
        Ext.onReady(function() {

            var item1 = new Ext.Panel({
                title: 'Accordion Item 1',
                html: '&lt;empty panel&gt;',
                border:false
            });

            var item2 = new Ext.Panel({
                title: 'Accordion Item 2',
                html: '&lt;empty panel&gt;',
                iconCls:'settings'
            });

            var item3 = new Ext.Panel({
                title: 'Accordion Item 3',
                html: '&lt;empty panel&gt;',
                cls:'empty'
            });

            var item4 = new Ext.Panel({
                title: 'Accordion Item 4',
                html: '&lt;empty panel&gt;',
                cls:'empty'
            });

            var item5 = new Ext.Panel({
                title: 'Accordion Item 5',
                html: '&lt;empty panel&gt;',
                cls:'empty'
            });

            var accordion = new Ext.Panel({
                region:'west',
                title:'菜单',
                margins:'5 0 5 5',
                split:true,
                width: 210,
                layout:'accordion',
                collapsible: true,
                layoutConfig:{
                		titleCollapse: false,
                        activeOnTop: true
                    },
                items: [item1, item2, item3, item4, item5]
            });
			
			var title=new Ext.Panel({
				region:'north',
				height:50,
				title:'顶部面板'
			});
			
            var viewport = new Ext.Viewport({
                layout:'border',
                items:[
                	new Ext.BoxComponent({ // raw
                    region:'north',
                    el: 'north',
                    height:32
                }),
                    accordion,
                    new Ext.TabPanel({
	                    region:'center',
	                    deferredRender:false,
	                    activeTab:0,
	                    items:[{
	                        contentEl:'center1',
	                        title: 'Close Me',
	                        closable:true,
	                        autoScroll:true
	                    },{
	                        contentEl:'center2',
	                        title: 'Center Panel',
	                        closable:true,
	                        autoScroll:true
	                    }]
                })]
            });
        });
        //debugger;
    </script>
  </head>
  
  <body>
    <div id="north">
    <p>mobile管理</p>
    <div id="center2">2</div>
    <div id="center1">1</div>
  </div>
  </body>
</html:html>
